<template>
	<view class="assign">
		<view class="assign-boty" v-if="state">
			<view class="a-b-con" v-if="checkData.length > 0">
				<checkbox-group @change="checkboxChange">
					<uni-row >
						<uni-col :span="8" :key="item.id" v-for="item in checkData">
							<label class="uni-list-cell uni-list-cell-pd">
								<!-- 此处的obj.value 可以换成item.id 来获选取了哪几项 -->
							<checkbox :value="item.id" :checked="item.checked" style="display: none;" />
							<view class="a-b-col-box" :class="item.checked?'c-box':''">
								<text class="text text1">{{item.room_name || ''}}</text>
								<text class="text">{{item.type_name || ''}}</text>
							</view>
							</label>
						</uni-col>
					</uni-row>
				</checkbox-group>
			</view>
			<view class="a-b-butt" v-if="checkData.length > 0">
				<view class="butt-text">
					<view>
						<text class="t-top-text">已选房间：</text><text class="t-top-text1">{{checkValue.length || '0'}}</text>
					</view>
					<view>
						<text class="t-end-text">待分配房间：</text class="t-end-text t-end-text1"><text>{{checkData.length - checkValue.length || '0'}}</text>
					</view>
				</view>
				<button class="butt-but" size="mini" @click="submit">提交订单</button>
			</view>
		</view>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;" v-else>
			<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无房间信息!</text>
			<button class="but-but" size="mini" @click="addClick">去添加</button>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				state:1,
				uid:'', // 订单id
				pname:'', // 保洁名称
				checkData:[],
				checkValue:[]
			}
		},
		onLoad(res) {
			this.uid = res.uid
			this.pname = res.pname
			
			this.getClick()
		},
		methods: {
			/**
			 * 点击复选框 触发的事件
			 * @param {Object} e 复选框变化时的对象 e.target.value 为复选框选中的值的数组
			 */
			checkboxChange(e) {
				this.checkValue = e.target.value
				var items = this.checkData,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					let item = items[i]
					if (values.indexOf(String(item.id)) >= 0) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				};
			},
			/**
			 * 提交订单触发的事件
			 */
			submit() {
				if(this.checkValue.length < 1 ) return uni.showToast({
					title:'请选择房间',
					icon:"none"
				})
				uni.navigateTo({
				    url:`/hotelAdmin/indent/submit-order/submit-order?id=${this.checkValue}&uid=${this.uid}&pname=${this.pname}`
				});
			},
			/**
			 * 请求待分房列表
			 */
			async getClick(){
				try{
					let res = await this.$http.post('/index/Hotelorder/assignment_room')
					this.checkData = res
					this.state = this.checkData.length
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			addClick() {
				uni.switchTab({
				    url: '/pages/tag/home/home'
				});
			}
		}
	}
</script>

<style lang="scss">
$nav-height: 60rpx;
.assign {
	height: 100vh;
	.assign-boty {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		overflow: hidden;
		.a-b-con {
			flex: 1;
			box-sizing: border-box;
			overflow: auto;
			margin-bottom: 20rpx;
			padding: 20rpx;
			.uni-col {
				box-sizing: border-box;
				padding:0 20rpx!important;
				margin-bottom: 20rpx;
				.a-b-col-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 152rpx;
					background: #ECECEC;
					border: 0;
					border-radius: 20rpx;
					overflow: hidden;
					.text {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
					.text1 {
						font-size: 34rpx;
						margin-bottom: 10rpx;
					}
				}
				.c-box {
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					.text {
						color: #ffffff;
					}
				}
			}
		}
		.a-b-butt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 40rpx;
			.butt-text {
				.t-top-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					margin-right: 6rpx;
				}
				.t-top-text1 {
					font-size: 34rpx;
					font-weight: 500;
					color: #FF4B4B;
				}
				.t-end-text {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.7);
					margin-right: 6rpx;
				}
				.t-end-text1 {
					font-size: 28rpx;
				}
			}
			.butt-but {
				line-height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				font-size: 34rpx;
				color: #FFFFFF;
				margin: 0;
			}
		}
	}
	.but-but {
		line-height: 64rpx;
		border-radius: 32rpx;
		background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.but-but::after {
		display: none;
	}
}
</style>
